<template>
  <div class="box">
    <div class="container">
      <!-- <div class="tab-box flex ac">
        <span :class="tabActive == 0 ? 'tab-item-active' : ''" class="tab-item " @click="tabClick(0)">我的</span>
        <span :class="tabActive == 1 ? 'tab-item-active' : ''" class="tab-item " @click="tabClick(1)">销售看板</span>
        <span :class="tabActive == 2 ? 'tab-item-active' : ''" class="tab-item " @click="tabClick(2)">施工看板</span>
      </div> -->
      <!-- <div
        class="tab-box flex ac"
        v-if="[10, 1, 2, 6, 7].includes(userInfo.position_id)"
      >
        <span
          :class="tabActive == 0 ? 'tab-item-active' : ''"
          class="tab-item"
          @click="tabClick(0)"
          v-if="userInfo.position_id < 10"
          >我的</span
        >
        <span
          :class="tabActive == 1 ? 'tab-item-active' : ''"
          class="tab-item"
          @click="tabClick(1)"
          v-if="[10, 1, 2].includes(userInfo.position_id)"
          >销售看板</span
        >
        <span
          :class="tabActive == 2 ? 'tab-item-active' : ''"
          class="tab-item"
          @click="tabClick(2)"
          v-if="[10, 6, 7].includes(userInfo.position_id)"
          >施工看板</span
        >
      </div> -->
      <!-- 我的 -->
      <transition name="fade">
        <div class="tab-box-content" v-if="tabActive === 0">
          <home></home>
        </div>
      </transition>
      <!-- 销售看板 -->
      <transition name="fade">
        <div class="tab-box-content" v-if="tabActive == 1">
          <sale></sale>
        </div>
      </transition>
      <!-- 施工看板 -->
      <transition name="fade">
        <div class="tab-box-content" v-if="tabActive == 2">
          <construction v-if="tabActive == 2"></construction>
        </div>
      </transition>
    </div>
  </div>
</template>

<script>
import home from "@/views/home/components/home";
import sale from "@/views/home/components/saleStatistics";
import construction from "@/views/home/components/constructionStatistics";
import { getUserInfo } from "@/utils/auth";
export default {
  name: '',
  components: {
    home,
    sale,
    construction,
  },
  data() {
    return {
      userInfo: {},
      tabActive: "",
    };
  },
  watch: {},
  computed: {},
  mounted() {
    let userInfo = getUserInfo();
    this.userInfo = userInfo;
    console.log(this.$route.path, "页面数据");
    if (this.$route.path == "/salesDashboard") {
      this.tabActive = 1;
    } else if (this.$route.path == "/constructionSignboard") {
      this.tabActive = 2;
    } else if (this.$route.path == "/taskCenter") {//taskCenter
      this.tabActive = 0;
    }
    // if (userInfo.position_id < 10 || userInfo.position_id == 11) {
    //   this.tabActive = 0;
    // } else {
    //   this.tabActive = 1;
    // }
  },
  methods: {
    // tab切换
    tabClick(value) {
      this.tabActive = -1;
      setTimeout(() => {
        this.tabActive = value;
      }, 300);
    },
  },
};
</script>

<style lang="scss" scoped>
@import "./index.scss";
</style>
